<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<header>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>编辑页面</title>
        <link href="/assets/images/favicon.ico" rel="icon">
        <link rel="stylesheet" href="/assets/libs/layui/css/layui.css" />
        <link rel="stylesheet" href="/assets/module/admin.css?v=318" />

        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
        <script type="text/javascript" src="/assets/js/common.js?v=318"></script>

        <style>
            .model-form-footer {
                text-align: center;
            }
            #card{

            }

        </style>
    </head>
</header>
<body >
<div>
    <div class="layui-card" style="min-width: 600px; min-height: 800px" id="card">
        <div class="layui-card-body">
            <form class="layui-form" action="/student/save" method="post">
                <input type="hidden" name="id" th:value="${model.id}">
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required placeholder="请输入姓名" autocomplete="off" class="layui-input" th:value="${model.name}">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">工作单位</label>
                    <div class="layui-input-block">
                        <input type="text" name="department" placeholder="请输入工作单位" autocomplete="off" class="layui-input" th:value="${model.department}" required>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">手机号码</label>
                    <div class="layui-input-block">
                        <input type="text" name="tel" placeholder="请输入手机号码" autocomplete="off" class="layui-input" th:value="${model.tel}" required lay-verify="phone">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">培训项目</label>
                    <div class="layui-input-block">
                        <select id="projectSelect" name="project" th:attr="data-selected=${model.project.projectName}" required>
                            <option value="">请选择项目</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">班级</label>
                    <div class="layui-input-block">
                        <select id="classSelect" name="classs" th:attr="data-selected=${model.classs.className}" required>
                            <option value="">请选择班级</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item" style="margin-top: 20px;">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="saveForm">保存</button>
                        <button type="button" class="layui-btn layui-btn-primary" ew-event="closeDialog">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="/assets/libs/jquery/jquery-3.2.1.min.js"></script>

<script>
    $(function () {
        layui.use(['form', 'layer'], function () {
            var form = layui.form;
            var layer = layui.layer;




            // 自定义验证规则
            form.verify({
                phone: function (value, item) { // value：表单的值，item：表单的DOM对象
                    var phoneReg = /^1\d{10}$/; // 11位手机号，以1开头
                    if (!phoneReg.test(value)) {
                        return '请输入有效的11位手机号码';
                    }
                }
            });

            // 访问父窗口的数据
            var classesNameList = parent.ClassNames;
            var projectNameList = parent.ProjectNames;

            populateDropdowns();

            function populateDropdowns() {

                // 填充项目下拉菜单
                var projectDropdown = $("#projectSelect");
                var selectedProject = $("#projectSelect").data("selected"); // 获取回显值
                projectNameList.forEach(function (project) {
                    if (selectedProject === project) {
                        projectDropdown.append(new Option(project, project, true, true));
                    } else {
                        projectDropdown.append(new Option(project, project));
                    }
                });

                // 填充班级下拉菜单
                var classDropdown = $("#classSelect");
                var selectedClassName = $("#classSelect").data("selected");
                classesNameList.forEach(function (classItem) {
                    if (selectedClassName === classItem) {
                        classDropdown.append(new Option(classItem, classItem, true, true));
                    } else {
                        classDropdown.append(new Option(classItem, classItem));
                    }
                });

                layui.form.render('select'); // 更新layui表单渲染
            }



            form.on('submit(saveForm)', function (data) {
                // 提交表单到后端
                $.ajax({
                    type: 'POST',
                    url: '/student/save',
                    data: data.field,
                    success: function (res) {
                        if (res.code === 0) {
                            // 确保先弹出消息再关闭窗口
                            parent.layer.msg('保存成功', {icon: 1, time: 1500}, function () {
                                // 关闭当前子窗口
                                var index = parent.layer.getFrameIndex(window.name); // 获取当前iframe索引
                                parent.layer.close(index); // 关闭父窗口

                                parent.layui.table.reload('tableList');// 关闭弹窗
                                // 执行其他操作，例如刷新父页面
                                /*$('#search', parent.document).click();*/

                            });
                        } else {
                            layer.msg(res.msg, {
                                icon: 2,
                                anim: 6
                            });
                        }
                    },
                    error: function (res) {
                        layer.msg('网络错误，请稍后再试', {
                            icon: 2,
                            anim: 6
                        });
                    }
                });
                return false; // 阻止默认表单提交
            });
        });

    });

</script>

</body>
</html>
